<template>
  <div class="table2 flex-col h-full overflow-hidden m-m">
    <div class="pb-14">
      <MsSectioner :values="menuList" @click="tabChange" />
    </div>
    <div class="flex-1 w-full color-bg-1">
      <section class="box-full overflow-hidden box-border">
        <transition name="fade-slide" mode="out-in" appear>
          <keep-alive>
            <component :is="menuList[selectedKey].value"></component>
          </keep-alive>
        </transition>
      </section>
    </div>
  </div>
</template>
<script setup>
import Site from './Site.vue'
import Account from './Account.vue'
import CloudAccount from './CloudAccount.vue'
defineOptions({ name: 'goodsSubsidy' })
const selectedKey = ref(0)
const menuList = [
  { name: '站点管理', value: Site },
  { name: '平台账户管理', value: Account },
  { name: '云厂商管理', value: CloudAccount }
]
const tabChange = (val) => {
  selectedKey.value = val.index
}
</script>
<style lang="scss" scoped>
.color-bg-1 {
  background: var(--color-bg-1);
}
.center-tab {
  border-left: 1px solid rgb(var(--primary-6));
  border-right: 1px solid rgb(var(--primary-6));
}
</style>
